<!--
  ~ Copyright (c) 2020 the original author or authors
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      https://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  ~ or implied. See the License for the specific language governing
  ~ permissions and limitations under the License.
  -->

<div *ngIf="model" class="menu" [ngStyle]="{ width: closed ? '55px' : '200px' }">
  <mat-list>
    <mat-nav-list
      (click)="onDashBoard(routes.Dashboard)"
      matTooltip="{{ 'side_menu.dashboard' | translate }}"
      [matTooltipPosition]="'right'"
      [matTooltipDisabled]="!closed"
      [ngClass]="{ highlighted: currentPage === routes.Dashboard }"
    >
      <mat-icon svgIcon="dashboard-white"></mat-icon>
      <a mat-nav-list>
        <span *ngIf="!closed">
          {{ 'side_menu.dashboard' | translate }}
        </span>
      </a>
    </mat-nav-list>
    <mat-nav-list
      (click)="onTest(routes.TestModel)"
      matTooltip="{{ 'side_menu.test' | translate }}"
      [matTooltipDisabled]="!closed"
      [matTooltipPosition]="'right'"
      [ngClass]="{ highlighted: currentPage === routes.TestModel }"
    >
      <mat-icon svgIcon="play-icon-white"></mat-icon>
      <a mat-nav-list>
        <span *ngIf="!closed">
          {{ 'side_menu.test' | translate }}
        </span>
      </a>
    </mat-nav-list>
    <mat-nav-list
      (click)="onManageCollection(routes.ManageCollection)"
      matTooltip="{{ 'side_menu.face_collection' | translate }}"
      [matTooltipPosition]="'right'"
      [matTooltipDisabled]="!closed"
      [ngClass]="{ highlighted: currentPage === routes.ManageCollection }"
      *ngIf="type === recognition"
    >
      <mat-icon svgIcon="face-icon-white"></mat-icon>
      <a mat-nav-list>
        <span *ngIf="!closed">
          {{ 'side_menu.face_collection' | translate }}
        </span>
      </a>
    </mat-nav-list>
  </mat-list>

  <button mat-icon-button class="toggle-list" (click)="closed = !closed">
    <mat-icon *ngIf="closed; else opened"> keyboard_double_arrow_right </mat-icon>
    <ng-template #opened>
      <mat-icon> keyboard_double_arrow_left </mat-icon>
    </ng-template>
  </button>
</div>
